<template>
  <!-- <el-card class="box-card"> -->
  <el-form
    :label-position="labelPosition"
    label-width="80px"
    :model="form"
    ref="ref_form"
    :rules="rules_loginForm"
    class="loginForm sign-in-form "
    :hide-required-asterisk="hideRequiredAsterisk"
  >
    <el-form-item label=" " prop="phoneNumber">
      <el-input
        placeholder="请输入手机号"
        v-model.trim="form.phoneNumber"
        @keyup.enter="onSubmit"
      >
        <template #prepend>
          <img src="~@/assets/img/icon/user.png" alt
        /></template>
      </el-input>
    </el-form-item>
    <el-form-item label=" " prop="password">
      <el-input
        type="password"
        placeholder="请输入密码"
        v-model.trim="form.password"
        @keyup.enter="onSubmit"
      >
        <template #prepend>
          <img src="~@/assets/img/icon/pass.png" alt
        /></template>
      </el-input>
    </el-form-item>
    <el-form-item label=" ">
      <div class="flex-j">
        <el-checkbox v-model="form.checked">记住用户名</el-checkbox>
        <el-button @click="clickBtn" type="text">注册</el-button>
      </div>
      <el-button class="submit-btn" type="primary" @click="onSubmit"
        >提 交</el-button
      >
    </el-form-item>
  </el-form>
  <!-- </el-card> -->
</template>
<script>
import login from "@/mixin/login";

import { reactive, toRef, toRefs, getCurrentInstance } from "vue";

function useFeatureX() {
  // 响应式数据抽离出setup 具有代码可读性
  const state = reactive({
    form: { phoneNumber: "", password: "", checked: false },
  });
  return state;
}

export default {
  name: "LoginForm",
  props: {
    signUpMode: Boolean,
  },
  // context
  setup(props, { attrs, slots, emit }) {
    const { ctx } = getCurrentInstance();
    const data = useFeatureX();
    const { mixin_loginData, clickBtn } = login();
    const onSubmit = () => {
      ctx.$refs.ref_form.validate((valid) => {
        if (valid) {
          emit("onSubmit", data.form);
        } else {
          return false;
        }
      });
    };
    return { ...toRefs(mixin_loginData), ...toRefs(data), clickBtn, onSubmit };
  },
};
</script>


